<template>
  <div>
    <el-dialog
      title="车辆配置"
      :visible="driver"
      width="30%"
      @close="close1"
    >
      <div>
        <span>配置司机需满足以下条件：</span>
        <div style="margin-top: 20px;">1.车辆信息已完善 </div>
        <div style="margin-top: 20px;">2.车辆无未完成运输任务</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close1">取 消</el-button>
        <el-button type="primary" @click="allocation = true">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog

      title="配置司机"
      :visible="allocation"
      width="30%"
      @close="close2"
    >
      <div>
        <div>
          <div style="margin-top: 20px;">车牌号：{{ driverData.licensePlate }}</div>
          <div style="margin-top: 20px;">车型：{{ driverData.truckTypeName }}</div>
          <div style="margin-top: 20px;">车辆状态：{{ driverData.workStatus===0?'停用':'可用' }}</div>
          <div style="margin-top: 20px;">实载重量：{{ driverData.allowableLoad }}</div>
          <div style="margin-top: 20px;">实载体积：{{ driverData.allowableVolume }}</div>
        </div>
        <div style="margin-top: 20px;">
          <span>配置司机：</span>
          <el-cascader
            v-model="driverIds"
            :options="options"
            :props="{ multiple: true}"
            clearable
          />
          <!-- <el-select v-model="driverIds" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select> -->
        </div>
        <div>
          <el-table style="width: 100%" :data="driverIds">
            <el-table-column label="序号" width="" type="index" />
            <el-table-column prop="label" label="司机名称" width="" />
            <el-table-column label="操作">
              <template v-slot="{row}">
                <el-button style="color:#80beff" @click="showDetails(row)">查看</el-button>
                <el-button type="primary" @click="del(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-col :span="12">
        <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
        <el-button size="mini" @click="close2">取消</el-button>
      </el-col>
    </el-dialog>
  </div>
</template>
<script>
import { getDetails, getunBindingDrivers } from '../../api/carList'
export default {
  props: {
    driver: {
      type: Boolean,
      default: false
    },
    truckId: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      options: [],
      driverIds: [],
      allocation: false,
      driverData: {
        licensePlate: '',
        truckTypeName: '',
        workStatus: '',
        allowableLoad: '',
        allowableVolume: ''
      }
    }
  },
  created() {
    // this.getDriversList()
    this.getDetails()
    this.getDrivers1()
  },
  methods: {
    // 删除司机
    del(row) {
      this.driverIds = this.driverIds.filter(item => item[0] !== row[0])
    },
    // 获取未绑定司机列表
    async getDrivers1() {
      const res = await getunBindingDrivers()
      console.log(res)
      this.options = res.data.map(item => ({ value: item.id, label: item.name }))
    },
    // 获取详情
    async getDetails() {
      const res = await getDetails(this.truckId)
      this.driverData = res.data
    },
    // 获取司机列表
    /* async getDriversList() {
      const res = await getDrivers(this.truckId)
      //   console.log(res)
      this.options = res.data.map(item => ({ value: item.id, label: item.name }))
    }, */

    // 确认配置
    async submitForm() {
      console.log(this.driverIds)
      //   await truckDrivers({ driverIds: this.driverIds.map(item => (Number(item))), truckId: Number(this.truckId) })
      if (this.driverIds.length !== 0) {
        this.$message.success('绑定司机成功')
      }
    },
    // 跳转详情页
    showDetails(row) {
      console.log(row[0])
      this.$router.push(`/car/driverDetails/${row[0]}`)
    },

    close1() {
      this.$emit('update:driver', false)
    },
    close2() {
      this.allocation = false
      this.$emit('update:driver', false)
    }
  }
}
</script>

<style>

</style>

